<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>在线考试</title>

    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="css/test.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/iview.css">
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/index.js"></script>
    <script src="js/axios.js"></script>

    <script>


    </script>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }
    </style>

</head>
<body>
<div class="main" id="app">
    <!--nr start-->
    <div class="test_main" :data="tableData">

        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <div class="test_title">
                        <p class="test_time">
                            <b class="alt-1" v-text="keepTime"></b>
                        </p>
                        <font><input type="button" name="test_jiaojuan" value="交卷" @click="endtest"></font>
                    </div>
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>考试题目:<span style="margin-left:30px;color: red">{{tableData.title}}</span></h2>
                            <h2>考试时长:<span style="margin-left:20px;color: red">{{tableData.duration}}分钟</span></h2>
                            <p style="float: right">
                                <span>共:{{tableData.total}}</span><span>分</span>
                            </p>
                        </div>
                    </div>

                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">{{tableData.radionum}}</i><span>题</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>

                            <li :id="forId(index)" v-for="(site,index) in radiorubricList">
                                 <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>
                                <div class="test_content_nr_main">
                                    <el-radio-group v-model="site.answerId">
                                    <ul>
                                        <li class="option" v-for="siteexamanswers in site.examanswers" @change="radioTest(site)">

                                               <el-radio :label="siteexamanswers.id" border>{{siteexamanswers.optiones}}.{{siteexamanswers.content}}</el-radio>
                                            <!--<input type="radio" class="radioOrCheck" :name="forId(index)"
                                                   @click="radioTest(site,siteexamanswers)"
                                            />
                                            <label>
                                                {{siteexamanswers.optiones}}.
                                                <p class="ue" style="display: inline;">{{siteexamanswers.content}}</p>
                                            </label>-->
                                           </li>
                                   </ul>
                                    </el-radio-group>
                                </div>




                            </li>


                        </ul>
                    </div>


                    <!-------------------------------------------------------------------------------------------->
                    <!--多选题-->
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>多选题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">{{tableData.multiplenum}}</i><span>题</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>

                            <li :id="forIdduxuan(index)" v-for="(site,index) in duorubricList">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>

                                <div class="test_content_nr_main"><!--@mouseleave="leave() "-->

                                    <el-checkbox-group v-model="site.answerId" >

                                        <ul>

                                            <li class="option" v-for="siteexamanswers in site.examanswers"
                                                >
                                               <!--  <input type="checkbox" class="radioOrCheckduo" :name="forIdduxuan(index)"
                                                         :value="siteexamanswers.id" v-model="net_car"
                                                  />-->

                                                <el-checkbox :label="siteexamanswers.id" border @change="duoxuanTest(site)">
                                                    {{siteexamanswers.optiones}}.{{siteexamanswers.content}}
                                                </el-checkbox>

                                            </li>


                                        </ul>
                                    </el-checkbox-group>

                                </div>
                            </li>


                        </ul>
                    </div>
                    <!--判题-->
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>判断题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">{{tableData.judgenum}}</i><span>题</span>
                            </p>
                        </div>

                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <li :id="forIdpanduan(index)" v-for="(site,index) in judgerubricList">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>
                                <div class="test_content_nr_main">
                                    <el-radio-group v-model="site.answerId" @change="panduanTestdui(site)">

                                            <el-radio  label="正确" border >正确</el-radio>
                                            <el-radio  label="错误" border >错误</el-radio>
                                    </el-radio-group>
                                           <!-- <input type="radio" class="radioOrCheckpanduan" :name="forIdpanduan(index)"
                                                   @click="panduanTestdui(site)"
                                            />
                                            <label>
                                                <p class="ue" style="display: inline;">正确</p>
                                            </label>
                                        </li>
                                        <li class="option">

                                            <input type="radio" class="radioOrCheckpanduan" :name="forIdpanduan(index)"
                                                   @click="panduanTestcuo(site)"
                                            />
                                            <label>
                                                <p class="ue" style="display: inline;">错误</p>
                                            </label>-->

                                </div>
                            </li>


                        </ul>
                    </div>
                    <!--填空题-->
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>填空题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">{{tableData.fillnum}}</i><span>题</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <li :id="forIdtiankong(index)" v-for="(site,index) in packrubricList">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>
                                <div class="test_content_nr_main">
                                    答案:
                                    <el-input
                                            type="textarea"
                                            v-model="site.answerId"
                                            autosize
                                            placeholder="请输入答案"
                                            @change="tiankongtest(site)"
                                    >
                                    </el-input>
                                    每个空的答案用逗号隔开,比如:Javaweb,Javaoop,Mybatis
                                </div>
                            </li>


                        </ul>
                    </div>

                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                            </i>答题卡
                        </h1>
                        <p class="test_time">
                            <b class="alt-1" id="tmesss" v-text="keepTime"></b>
                        </p>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">{{tableData.radionum}}</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>
                                <li v-for="n in radionum"><a :href="forIdd(n-1)">{{n}}</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>多选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">{{tableData.multiplenum}}</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>

                                <li v-for="n in duorubricnum"><a :href="forIddduoxuan(n-1)">{{n}}</a></li>


                            </ul>
                        </div>
                    </div>
                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>判断题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">{{tableData.judgenum}}</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>
                                <li v-for="n in panduantinum"><a :href="forIdpanduanp(n-1)">{{n}}</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>填空题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">{{tableData.fillnum}}</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>
                                <li v-for="n in tiankongnum"><a :href="forIdtiankongtt(n-1)">{{n}}</a></li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>

    <!--考试结束对话框-->
    <el-dialog
            title="考试结束"
            :visible.sync="centerDialogVisible"
            width="30%"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            center>
        <span>考试已结束,最终得分为:<h2 style="color: red">{{finalScore}}</h2><br><h2 style="color: red">{{acceptablevalue}}</h2></span>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="kaoshijieshu">确 定</el-button>
  </span>
    </el-dialog>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="js/jquery.countdown.js"></script>
<script>
    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });
    $(function () {
        $('li.option label').click(function () {
            debugger;
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });
    });

    function parseUrl() {
        var url = location.href;
        var i = url.indexOf('?');
        if (i == -1) return;
        var querystr = url.substr(i + 1);
        var arr1 = querystr.split('&');
        var arr2 = new Object();
        for (i in arr1) {
            var ta = arr1[i].split('=');
            arr2[ta[0]] = ta[1];
        }
        return arr2;
    }

    var v = parseUrl();//解析所有参数
    axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
    let userid = sessionStorage.getItem("userid");
    var courseid = sessionStorage.getItem("courId");
   var app= new Vue({
        el: "#app",
        data: {
            //最终得分
            finalScore: "",
            acceptablevalue:"",//合格不合格
            centerDialogVisible: false,
            /*倒计时*/
            keepTime: '倒计时',
            limittime: '',
            settime: '',
            flag: false,
            /*倒计时*/
            tableData: [{}],
            radionum: "",
            duorubricnum: '',
            panduantinum: '',
            tiankongnum: '',
            daoTime: "",
            radiorubricList: [{}],
            duorubricList: [{}],
            packrubricList: [{}],
            judgerubricList: [{}],
            //倒计时
            time: null


        },
        mounted: function () {
            this.query();
            // this.querycourse();
            /* this.queryrubric();*/

        },
        methods: {
            /*确认考试结束*/
            kaoshijieshu() {
                window.close();
            },
            /*点击交卷*/
            endtest() {
                this.$confirm('确定交卷吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.secondSteptest();
                })
            },
            /*交卷前睡一秒*/
            secondSteptest() {
                setTimeout(function(){
                    let params = new URLSearchParams();
                    params.append("studentId", userid);
                    params.append("examparperId", app.tableData.id);
                    params.append("courseid", courseid);
                    axios({
                        method: 'post',
                        url: '/api/exam/examrubric/examination',
                        data: params,
                    }).then(res => {
                          if(res.data.success){
                              app.finalScore = res.data.remark.total;
                              app.acceptablevalue = res.data.remark.isqualified;
                              app.centerDialogVisible = true;
                              if (app.time != null) {
                                  window.clearInterval(app.time);
                              }
                          }else{
                              app.$notify({
                                  title: '失败',
                                  message: res.data.message,
                                  type: 'warning'
                              });
                          }



                    })}, 1000);

            },
            query() {
                let testid = v['name'];
                let params = new URLSearchParams();
                params.append("examparper", testid);
                params.append("studentid", userid);

                axios({
                    method: 'post',
                    url: '/api/exam/examrubric/queryexamrubricer',
                    data: params,

                }).then(res => {
                    this.radiorubricList = res.data.radiorubricList;
                    this.duorubricList = res.data.duorubricList.map(item => {
                        item.checks = [];
                        return item;
                    });
                    this.packrubricList = res.data.packrubricList;
                    this.judgerubricList = res.data.judgerubricList;
                    this.tableData = res.data.parpercontent;
                    this.radionum = res.data.parpercontent.radionum;
                    this.duorubricnum = res.data.parpercontent.multiplenum;
                    this.panduantinum = res.data.parpercontent.judgenum;
                    this.tiankongnum = res.data.parpercontent.fillnum;
                    this.limittime = res.data.downtime;
                    console.log("时间" + this.limittime);
                    this.StartCountDown();
                    for(let index in this.duorubricList){
                        if(this.duorubricList[index].answerId!=null){
                            this.duorubricList[index].answerId=this.duorubricList[index].answerId.split(",");
                        }else{
                            this.duorubricList[index].answerId=[];
                        }

                        console.log("85123+"+this.duorubricList[index].answerId);
                    }


                    
                })
            },
            /*点击单选按钮*/
            radioTest(site) {
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("examrubricId", site.id);
                params.append("score", site.score);
                params.append("selectanswerId",site.answerId);
                params.append("courseid", courseid);
                axios({
                    method: 'post',
                    url: '/api/exam/examrubric/examend',
                    data: params,

                }).then(res => {
                    console.log(res);

                })
            },
            /*点正确按钮*/
            panduanTestdui(site) {
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("score", site.score);
                params.append("examrubricId", site.id);
                params.append("selectanswerId", site.answerId);
                params.append("courseid", courseid);
                axios({
                    method: 'post',
                    url: '/api/exam/examrubric/examend',
                    data: params,

                }).then(res => {
                    console.log(res);

                })
            },
            /*点错误按钮*/
            panduanTestcuo(site) {
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("score", site.score);
                params.append("examrubricId", site.id);
                params.append("selectanswerId", "错误");
                params.append("courseid", courseid);
                axios({
                    method: 'post',
                    url: '/api/exam/examrubric/examend',
                    data: params,

                }).then(res => {
                    console.log(res);

                })
            },
            /*填空更改之后触发*/
            tiankongtest(site) {
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("score", site.score);
                params.append("examrubricId", site.id);
                params.append("selectanswerId", site.answerId);
                params.append("courseid", courseid);
                axios({
                    method: 'post',
                    url: '/api/exam/examrubric/examend',
                    data: params,

                }).then(res => {

                    console.log(res);
                })
            },
            /*多选题*/
            duoxuanTest(site) {
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("examrubricId", site.id);
                params.append("score", site.score);
                params.append("selectanswerId", site.answerId);
                params.append("courseid", courseid);
                axios({
                    method: 'post',
                    url: '/api/exam/examrubric/examend',
                    data: params,

                }).then(res => {

                    console.log(res);
                })
            },
            /*倒计时*/
            StartCountDown() {
                /*  var mydate = new Date();
                    mydate.setMinutes(mydate.getMinutes() + this.limittime);
                    this.settime=this.limittime;
    */
                this.time = setInterval(() => {
                    this.timeDown();
                }, 1000)
            },

            timeDown() {
                //const endTime = new Date(this.settime);
                const nowTime = new Date();
                let leftTime = parseInt((this.limittime - nowTime.getTime()) / 1000);
                // let d = parseInt(leftTime / (24 * 60 * 60));
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24));
                let m = this.formate(parseInt(leftTime / 60 % 60));
                let s = this.formate(parseInt(leftTime % 60));
                if (leftTime <= 0) {
                    clearInterval(this.time)
                    this.secondSteptest();
                    /*     let params = new URLSearchParams();
                         params.append("studentId", userid);
                         params.append("examparperId", this.tableData.id);
                         params.append("courseid", courseid);
                         axios({
                             method: 'post',
                             url: '/api/exam/examrubric/examination',
                             data: params,
                         }).then(res => {
                             this.finalScore=res.data.remark;
                             this.centerDialogVisible = true;
                         })*/
                }
                this.keepTime = `${h}:${m}:${s}`;
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
            /*倒计时*/

            forId: function (index) {
                return "qu_0_" + index
            },
            forIdduxuan: function (index) {
                return "qu_1_" + index
            },
            forIdpanduan: function (index) {
                return "qu_2_" + index
            }, forIdtiankong: function (index) {
                return "qu_3_" + index
            },
            forIdd: function (index) {
                return "#qu_0_" + index
            },
            forIddduoxuan: function (index) {
                return "#qu_1_" + index
            },
            forIdpanduanp: function (index) {
                return "#qu_2_" + index
            }, forIdtiankongtt: function (index) {
                return "#qu_3_" + index
            }

        }
    })

</script>
</body>
</html>
